body{
    background-color: #f6f6f6;
}
header{
    height: 1.15rem;
    width: 10.8rem;
    box-sizing: border-box;
    padding: 0rem .35rem;
    background-color: #ffffff;
    position: sticky;
    top: 0rem;
    z-index: 100;
    .nav{
        width: 10.08rem;
        height: 1.15rem;
        display: flex;
        align-items: center;
        >img:nth-of-type(1){
            width: .72rem;
            height: .72rem;
            margin-right: .86rem;
        }
        .container{
            width: 7.78rem;
            position: relative;
            overflow-x: scroll;
            &::-webkit-scrollbar{
                display: none;
            }
            ul{
                display: flex;
                width: 12.1rem;
                li{
                    display: flex;
                    margin-right: .58rem;
                    a{
                        font-size: .46rem;
                        display: inline-block;
                        color: #999999;
                        height: 1.15rem;
                        line-height: 1.15rem;
                    }
                }
                >li:nth-child(2){
                    a{
                        font-weight: bolder;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        color: black;
                        &::after{
                            content: "";
                            display: block;
                            width: .23rem;
                            height: .09rem;
                            background-color: black;
                        }
                    }
                }
            }
        }
        >img:nth-of-type(2){
            width: 1.15rem;
            height: 1.15rem;
        }
    }
}
.publish{
    position: fixed;
    top: 15.26rem;
    right: 0rem;
    a{
        display: inline-block;
        width: 1.44rem;
        height: 1.44rem;
        background-color: #ff5934;
        border-radius: 50%;
        color: white;
        font-size: .4rem;
        font-weight: bolder;
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
            display: flex;
            font-size: .72rem;
            height: .72rem;
        }
    }
}
/* 中间内容 */
main{
    box-sizing: border-box;
    /* padding-top: .43rem; */
    .message{
        width: 10.8rem;
        height: 13.13rem;
        margin: 0rem auto .23rem;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: .43rem .35rem;
        /* margin-top: .43rem; */
        /* margin-bottom: 1.44rem; */
        .message-top{
            width: 100%;
            height: .86rem;
            display: flex;
            align-items: center;
            position: relative;
            div{
                width: .78rem;
                height: .78rem;
                border-radius: 50%;
                background-image: url(../images/米圈-头像.jpg);
                background-size: 100%;
                margin-right: .29rem;
            }
            >span:nth-of-type(1){
                font-size: .35rem;
            }
            >span:nth-of-type(2){
                font-size: .58rem;
                color: #c6c6c6;
                position: absolute;
                right: 0rem;
            }
            
        }
        .message-word{
            margin-top: .14rem;
            p{
                font-size: .43rem;
            }
        }
        .message-pic{
            display: flex;
            img{
                margin-top: .43rem;
                width: 4.99rem;
                height: 6.8rem;
            }
        }
        .message-topic{
            width: 3.6rem;
            height: .6rem;
            background-color: #f6f6f6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: .23rem;
            border-radius: .14rem;
            img{
                width: .35rem;
                height: .35rem;
            }
            span{
                font-size: .35rem;
                color: #877884;
            }
        }
        .message-other{
            width: 10.08rem;
            height: .98rem;
            background-color: #f6f6f6;
            display: flex;
            align-items: center;
            margin-top: .23rem;
            border-radius: .14rem;
            span{
                font-size: .37rem;
            }
        }
        .message-bottom{
            display: flex;
            justify-content: space-evenly;
            align-content: center;
            margin-top: .5rem;
            a{
                span{
                    font-size: .46rem;
                    display: flex;
                    h1{
                        font-size: .35rem;
                    }
                }
            }
            
        }
    }
}
/* 底部导航 */
footer{
    width: 10.8rem;
    height: 1.5rem;
    display: flex;
    justify-content: space-evenly;
    background-color: #ffffff;
    align-items: center;
    position: fixed;
    bottom: 0rem;
    z-index: 100;
    box-shadow: 0px -0.06rem .14rem rgba($color: #000000, $alpha: 0.2);
    .nav-bottom{
        width: 2.07rem;
        height: 1.12rem;
        display: flex;
        justify-content: center;
        a{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: .58rem;
                height: .58rem;
            }
            h1{
                font-size: .35rem;
            }
        }
        
    }
    .nav-bottom:nth-child(3){
        a{
            h1{
                color: #ff7517;
            }
        }
    }
}